<template>
	<el-checkbox-group v-model="dicts" @change="handleChange" v-loading="loading">
        <el-checkbox v-for="(item, index) in items" :key="index" :value="item.sz" :label="item.mc" />
    </el-checkbox-group>
</template>
<script lang="ts">
import { defineComponent ,onMounted,reactive, ref, toRefs, watch} from 'vue';
import request from '/@/utils/request';
export default defineComponent ({
    name: 'dictCheckbox',
    emits: ['onConfirm'],
    props: {
        selectedId: {
            type: Array,
            default: [],
        },
        lxid: Number,
    },
    setup(props, context) {
        const state = reactive({
            loading: false,
            items:[],
            dicts:props.selectedId || [],
        })

        const loadData = ()=>{
            state.loading = true
			request.get('/system/dict/items/'+props.lxid).then(res => {
				state.items = res?.data || []
 			}).finally(()=>{
				state.loading = false
			})
        }
        onMounted(()=>{
            loadData();
        })

        watch(()=>props.selectedId, ()=>{
            state.dicts = props.selectedId;
		})

        const handleChange = (data:any)=>{
            context.emit("onConfirm", data);
        }

        return {
            ...toRefs(state),
            ...toRefs(props),
            handleChange,
        }
    }
})
</script>
